<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部面包屑区域 -->
        <div  slot="header" v-if="$route.query.id">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 筛选和新增按钮区域 -->
        <el-form inline :model="form">
              <el-col :span="18">
                 <el-form-item label="目录名称">
                    <el-input v-model="form.directoryName"></el-input>
                 </el-form-item>
                 <el-form-item label="状态">
                    <el-select v-model="form.state" placeholder="请选择">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                 </el-form-item>
                 <el-form-item>
                   <el-button size="small" @click="clear">清除</el-button>
                   <el-button size="small" type="primary" @click="search" >搜索</el-button>
                 </el-form-item>
               </el-col>
             <el-col :span="6">
                 <el-row type="flex" justify="end">
                   <el-form-item>
                     <el-button v-if="$route.query.id" type="text" @click="$router.push('/subjects/list')"><i class="el-icon-back"></i>返回学科</el-button>
                    <el-button size="small" type="success" @click="editDire('')"><i class="el-icon-edit"></i>新增目录</el-button>
                   </el-form-item>
                 </el-row>
             </el-col>

        </el-form>
        <!-- 信息提示 -->
        <el-alert :title= title type="info" show-icon :closable="false" />
        <!-- 表格区域 -->
        <el-table :data="list" style="width: 100%;margin:15px 0">
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="subjectName" label="所属学科" width="180"></el-table-column>
          <el-table-column prop="directoryName" label="目录名称" width="175"></el-table-column>
          <el-table-column prop="creatorID" label="创建者" width="175" :formatter="getUserName"></el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="175">
            <template v-slot="{row}">
              {{row.addDate|formatDate("yyyy-MM-dd hh:mm:ss")}}
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量" width="175"></el-table-column>
          <el-table-column prop="state" label="状态" width="150" :formatter="getState"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="text" v-if="row.state===0" @click="changeState(row.id,row.state)">启用</el-button>
              <el-button type="text" v-else @click="changeState(row.id,row.state)">禁用</el-button>
              <el-button type="text" v-if="row.state===0" @click="editDire(row.id)">修改</el-button>
              <el-button type="text" v-else disabled >修改</el-button>
              <el-button type="text" v-if="row.state===0" @click="delDire(row.id)">删除</el-button>
              <el-button type="text" v-else disabled >删除</el-button>
              </template>
          </el-table-column>
        </el-table>
        <!-- 分页符 -->
        <el-row type="flex" justify="end">
          <el-pagination background @size-change="changeSize" @current-change="changePage" :current-page="q.page" :page-sizes="[5, 10, 20, 50]" :page-size="q.pagesize" layout="prev, pager, next,sizes,jumper"  :total="q.counts"/>
        </el-row>

        <!-- 弹窗组件 -->
        <diaDire ref="diaDire" :showdialog.sync="showdialog" @updateList="getDirectoryList" />
      </el-card>
    </div>
  </div>
</template>

<script>
import { list as getDirectoryList, changeState, remove } from '@/api/hmmm/directorys'
import { simple as getSimpleUsers } from '@/api/base/users'
import { status } from '@/api/hmmm/constants'
import diaDire from '../components/directorys-add'
export default {
  data () {
    return {
      list: [], // 目录列表
      form: { // 搜索表单
        directoryName: null,
        state: null,
        subjectID: this.$route.query.id || null
      },
      options: status, // 下拉选项
      showdialog: false, // 弹窗显示
      q: {
        page: 1, // 页码
        pagesize: 10, // 每页显示数量
        counts: 0 // 总数
      },
      userList: [] // 简单用户列表
    }
  },
  components: {
    diaDire
  },
  computed: {
    title () {
      return '数据一共' + this.q.counts + '条'
    }
  },
  created () {
    this.getDirectoryList()
    this.simple()
  },
  methods: {
    // 删除目录
    delDire (id) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getDirectoryList()
      }).catch((err) => {
        console.log(err)
      })
    },
    // 新增目录按钮&&修改目录按钮
    async editDire (id) {
      await this.$refs.diaDire.simple() // 调用子组件渲染学科列表
      if (id) {
        await this.$refs.diaDire.getForm(id) // 调用子组件渲染表单
      }
      this.showdialog = true
    },
    // 改变目录状态
    async changeState (id, states) {
      const state = states === 1 ? 0 : 1
      const res = await changeState({ id, state })
      if (res.status !== 200) return this.$message.error(res.statusText)
      this.getDirectoryList()
    },
    // 清除搜索
    clear () {
      this.form.directoryName = null
      this.form.state = null
      this.getDirectoryList()
    },
    // 搜索
    async search () {
      this.getDirectoryList()
    },
    // 获取目录列表
    async getDirectoryList () {
      // if (this.form.state !== '') {
      const { data } = await getDirectoryList({ ...this.q, ...this.form })
      this.list = data.items
      this.q.counts = data.counts
    },
    // 获取简单用户列表
    async simple () {
      const { data } = await getSimpleUsers()
      this.userList = data
    },
    // 格式化创建者
    getUserName (row, column, cellValue, index) {
      const obj = this.userList.find(item => +item.id === +cellValue) // find寻找对应的数据并导出
      return obj ? obj.username : '未知'
    },
    // 格式化状态
    getState (row, column, cellValue, index) {
      return cellValue === 0 ? '已禁用' : '已启用'
    },
    // 切换每页显示条数
    changeSize (size) {
      this.q.pagesize = size
      this.q.page = 1
      this.getDirectoryList()
    },
    // 切换页码
    changePage (page) {
      this.q.page = page
      this.getDirectoryList()
    }

  }
}
</script>

<style scoped>
 .el-icon-back{
   margin-right: 5px;
 }
</style>
